<template>
    <el-row>
        <el-col>
            <el-card>
                <el-row>
                    <el-col>
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item style="float: right;">
                                <el-input v-model="condition.username" placeholder="请输入要搜索的用户名"
                                          @input="selectAll(1)"/>
                            </el-form-item>
                            <el-form-item style="float: right;">
                                <el-input v-model="condition.realname" placeholder="请输入要搜索的真实姓名"
                                          @input="selectAll(1)"/>
                            </el-form-item>
                            <el-form-item style="float: right;">
                                <el-select v-model="condition.status" placeholder="请选择用户账号状态"
                                           style="width: 200px;"
                                           @change="selectAll(1 )" clearable :value-on-clear=null>
                                    <el-option label="未认证" :value="0"/>
                                    <el-option label="已认证" :value="1"/>
                                    <el-option label="禁用" :value="2"/>
                                    <el-option label="注销" :value="3"/>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>

                <el-scrollbar>
                    <el-table :data="pageInfo.list" border height="500px" style="width: 100%">
                        <el-table-column prop="id" label="ID" width="70px"/>
                        <el-table-column prop="username" label="用户名" width="150px"/>
                        <el-table-column prop="phone" label="电话"/>
                        <el-table-column prop="email" label="邮箱"/>
                        <el-table-column prop="regTime" label="注册时间"/>
                        <el-table-column prop="status" label="状态">
                            <template #default="scope">
                                <el-tag v-if="scope.row.status == 0" type="warning">未认证</el-tag>
                                <el-tag v-if="scope.row.status == 1" type="success">已认证</el-tag>
                                <el-tag v-if="scope.row.status == 2" type="danger">禁用</el-tag>
                                <el-tag v-if="scope.row.status == 3" type="info">注销</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button size="small" type="primary" @click="selectById(scope.row.id)">查看认证信息
                                </el-button>
                                <el-popconfirm title="你确定禁用该账户吗?" confirm-button-text="确认"
                                               @confirm="disableById(scope.row.id)"
                                               cancel-button-text="取消" width="200px">
                                    <template #reference>
                                        <el-button size="small" type="danger">禁用</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-scrollbar>
                <el-row class="row-bg" justify="center" style="padding-top: 20px;">
                    <el-form-item>
                        <el-pagination background layout="prev, pager, next" :total="pageInfo.total"
                                       :page-size="pageInfo.pageSize" @change="selectAll"/>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="pageInfo.pageSize" placeholder="每页显示条数"
                                   style="width: 100px; padding-left: 40px"
                                   @change="selectAll(pageInfo.pageNum)">
                            <el-option label="5条" :value="5"/>
                            <el-option label="8条" :value="8"/>
                            <el-option label="10条" :value="10"/>
                            <el-option label="15条" :value="15"/>
                        </el-select>
                    </el-form-item>
                </el-row>
            </el-card>
        </el-col>
    </el-row>

    <!-- 用户认证信息对话框开始 -->
    <el-dialog v-model="infoDialog" title="认证信息" width="500">
        <el-descriptions :column="1" size="default" border>
            <el-descriptions-item>
                <template #label>
                    <el-icon><user/></el-icon>用户名
                </template>
                {{ userInfo.username }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <el-icon><tickets/></el-icon>姓名
                </template>
                {{ userInfo.realname }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <el-icon><tickets/></el-icon>性别
                </template>
                {{ userInfo.sex }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <el-icon><tickets/></el-icon>身份证号
                </template>
                {{ userInfo.idCard }}
            </el-descriptions-item>
        </el-descriptions>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="infoDialog = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 用户认证对话框结束 -->

</template>

<script setup>

import {ref} from "vue";
import {ElMessage} from "element-plus";
import userApi from "@/api/userApi.js";
import {Tickets, User} from "@element-plus/icons-vue";

//搜索条件
const condition = ref({
    name: null,
    parentId: null,
    status: null
});
//分页信息
const pageInfo = ref({
    pages: 0,
    pageNum: 0,
    pageSize: 8
});
//认证信息对话框状态
const infoDialog = ref(false);
//用户认证信息
const userInfo = ref({
    id: null,
    username: null,
    realname: null,
    sex: null,
    idCard: null
});

//条件(分页)查询所有
function selectAll(pageNum) {
    userApi.selectByCondition(condition.value, pageNum, pageInfo.value.pageSize)
        .then(resp => {
            pageInfo.value = resp.data;
        });
}

selectAll(1);

//根据id查询用户信息
function selectById(id) {
    userApi.selectById(id)
        .then(resp => {
            userInfo.value = resp.data;
            infoDialog.value = true;
        })
}

//根据id禁用用户
function disableById(id) {
    userApi.disableById(id)
        .then(resp => {
            ElMessage.success(resp.msg);
            selectAll(pageInfo.value.pageNum);
        });
}


</script>

<style scoped>

</style>